<template>
	<view class="">
		<movable-area class="movable-area" :scale-area="false">
			<movable-view
				class="movable-view"
				:class="!isRemove ? 'animation-info' : ''"
				style="pointer-events: auto"
				@click="clickBtn"
				@touchstart="touchstart"
				@touchend="touchend"
				@change="onChange"
				direction="all"
				inertia="true"
				:x="x"
				:y="y"
				:disabled="disabled"
				:out-of-bounds="true"
				:damping="200"
				:friction="100"
			>
				<slot></slot>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
export default {
	props: {
		//是否禁用拖动
		disabled: {
			type: Boolean,
			default: false
		},
		//是否自动停靠
		canDocking: {
			type: Boolean,
			default: true
		},
		//按钮默认位置离底部距离（px）
		bottomPx: {
			type: Number,
			default: 30
		},
		//按钮默认位置离右边距离（px）
		rightPx: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			left: 0,
			top: 0,
			isRemove: true,
			windowWidth: 0,
			windowHeight: 0,
			btnWidth: 0,
			btnHeight: 0,
			x: 10000,
			y: 10000,
			old: {
				x: 0,
				y: 0
			}
		};
	},
	mounted() {
		this.getSysInfo();
	},
	methods: {
		getSysInfo() {
			let sysInfo = uni.getSystemInfoSync();
			this.windowWidth = sysInfo.windowWidth;
			this.windowHeight = sysInfo.windowHeight;
			let view = uni.createSelectorQuery().in(this).select('.movable-view');
			view.boundingClientRect((rect) => {
				this.btnWidth = rect.width;
				this.btnHeight = rect.height;
				this.x = this.old.x;
				this.y = this.old.y;
				this.$nextTick((res) => {
					this.x = this.windowWidth - this.btnWidth - this.rightPx - 10;
					this.y = this.windowHeight - this.btnHeight - this.bottomPx;
				});
			}).exec();
		},
		//移动按钮
		onChange(e) {
			this.old.x = e.detail.x;
			this.old.y = e.detail.y;
		},
		//开始移动
		touchstart(e) {
			this.isRemove = true;
		},
		//结束移动
		touchend(e) {
			if (this.canDocking && this.old.x) {
				this.x = this.old.x;
				this.y = this.old.y;
				let bWidth = (this.windowWidth - this.btnWidth) / 2;
				if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
					this.$nextTick((res) => {
						this.x = 0 + 9;
					});
				} else {
					this.$nextTick((res) => {
						this.x = this.windowWidth - this.btnWidth - 11;
					});
				}
				this.isRemove = false;
			}
		},
		//点击按钮
		clickBtn() {
			this.$emit('clickBtn');
		}
	}
};
</script>

<style scoped>
.movable-view {
	width: 115rpx;
	height: 100rpx;

	border-radius: 50rpx;
	color: #ffffff;
	font-size: 26rpx;
	touch-action: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.animation-info {
	transition: left 0.25s ease;
}

.movable-area {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999 !important;
	pointer-events: none;
}
</style>
